import React, { useEffect, useState, useRef } from "react";
import { Form, Input, Button, Space } from 'antd';
import { SaveTwoTone, EditTwoTone, DeleteTwoTone, PlusOutlined } from '@ant-design/icons';

interface API {
    api_name: string;
    api_url: string;
    api_interval: number;
    api_mappingvariablename: string
}

interface ApiConfigProps {
    apis: Array<API>;
    onSave: (index: number) => void;
    onChange: (val: string, index: number, key: string) => void;
    onDelete: (index: number, apis: Array<API>) => void;
    onAdd: (apis: Array<API>) => void;
}

export default function ApiConfig(props: ApiConfigProps) {

    const [editableApiNames, setEditableApiNames] = useState({});

    const changeValue = (val, index, key) => {
        props.onChange(val.target.value, index, key);
    };


    const savedApi = props.apis.map((api, i) => {
        return (
            <div align="right" style={{ border: '1px solid #1890FF', padding: '0% 3%', margin: '3% 0%' }}>
                <div style={{ margin: '2%' }}>
                    <Space>
                        {editableApiNames[api.api_name] ? <SaveTwoTone onClick={() => {
                            setEditableApiNames((editableApiNames) => ({
                                ...editableApiNames,
                                [api.api_name]: !editableApiNames[api.api_name]
                            }));
                            props.onSave(i);
                        }} /> : <EditTwoTone onClick={() => {
                            setEditableApiNames((editableApiNames) => ({
                                ...editableApiNames,
                                [api.api_name]: !editableApiNames[api.api_name]
                            }));
                        }} />}


                        <DeleteTwoTone onClick={() => {
                            props.onDelete(i, props.apis);
                        }} style={{ display: 'inline' }} />
                    </Space>
                </div>
                <Form.Item
                    name={[api.api_name, 'apiName']}
                    // fieldKey={[api.fieldKey, 'apiName']}
                    rules={[{ required: true, message: '请填写接口名称' }]}
                >
                    <Input placeholder="请填写接口名称" readOnly={!editableApiNames[api.api_name]} defaultValue={api.api_name}
                           onBlur={(val)=>{changeValue(val, i, 'api_name')}} />
                </Form.Item>
                <Form.Item
                    name={[api.api_name, 'apiUrl']}
                    // fieldKey={[api.fieldKey, 'apiUrl']}
                    rules={[{ required: true, message: '请填写接口url' }]}
                >
                    <Input placeholder="请填写接口url" readOnly={!editableApiNames[api.api_name]} defaultValue={api.api_url}
                           onBlur={(val)=>{changeValue(val, i, 'api_url')}} />
                </Form.Item>
                <Form.Item
                    name={[api.api_name, 'apiRefreshInterval']}
                    // fieldKey={[api.fieldKey, 'apiRefreshInterval']}
                    rules={[{ required: true, message: '请填写接口刷新时间' }]}
                >
                    <Space style={{width: '100%'}}>
                        <Input placeholder="返回字段名称" readOnly={!editableApiNames[api.api_name]}
                               defaultValue={api.api_mappingvariablename} onBlur={(val)=>{changeValue(val, i, 'api_mappingvariablename')}} />
                        <Input placeholder="请填写接口刷新时间" readOnly={!editableApiNames[api.api_name]}
                               defaultValue={api.api_interval} onBlur={(val)=>{changeValue(val, i, 'api_interval')}} />
                    </Space>
                </Form.Item>
            </div>
        )
    })

    return (
        <div style={{ margin: '0% 3%' }}>
            {savedApi}
            <Form.Item>
                <Button type="dashed" onClick={() => {
                    props.onAdd(props.apis);
                }} block icon={<PlusOutlined />}>
                    添加
                </Button>
            </Form.Item>
        </div>
    )

}

